<template>
	<view>
		<image src="../../static/1-1-04.jpg" class="bgImg"></image>
		<view class="person">
			<view class="header">
				<text style="font-size: 24px;">个人中心</text>
			</view>
			<view class="userinfo">
				<view class="userimg">
					<image class="userimg" :src="userinfo.info.avatarUrl" mode=""></image>
				</view>
				<view class="usertext">
					<text v-if="userinfo.info.nickName != ''">{{userinfo.info.nickName}}的职业规划</text>
					<text v-else>未登录</text>
					<text style="font-size:14px;">只有更好的认识自己才能走向成功</text>
				</view>
			</view>
			<view class="wrapper">
				<view class="testing">
					<view class="testData">
						<image class="test-img" src="../../static/1.png" mode=""></image>
						<text>MBTI</text>
					</view>
					<view class="testData">
						<image class="test-img" src="../../static/1.png" mode=""></image>
						<text>九型人格</text>
					</view>
					<view class="testData">
						<image class="test-img" src="../../static/1.png" mode=""></image>
						<text>霍兰德</text>
					</view>
				</view>
				<view class="testResult">
					<view class="Resilt-title">
						<text>测试结果</text>
					</view>
					<text class="Resilt-text">是非成败转头空，青山依旧在，观看纯秋月春风吗，一会浊酒喜相逢</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		methods: {

		}
	}
</script>

<style>
	.bgImg {
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		color: #FFFFFF;
	}

	.person {
		display: flex;
		flex-direction: column;
		padding: 20px;
	}

	.userinfo {
		display: flex;
		flex-direction: row;
		margin: 20px auto;
	}

	.userimg {
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}

	.usertext {
		display: flex;
		flex-direction: column;
		margin: auto;
		padding: 20px;
	}

	.wrapper {
		height: 400px;
		background: #ffffff;
		border-radius: 20px;
	}

	.testing {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.testData {
		width: 80px;
		height: 100px;
		background-color: #FFFFFF;
		text-align: center;
		display: flex;
		flex-direction: column;
		color: #7ac2ce;
	}

	.test-img {
		width: 60px;
		height: 60px;
		margin: auto;
		margin-top: 10px;
	}

	.testResult {
		background: #f2f2f2;
		height: 200px;
		margin: 20px 10px;
		border-radius: 20px;
		display: flex;
		flex-direction: column;
	}

	.Resilt-title {
		text-align: center;
		color: #7ac2ce;
		margin-top: 10px;
	}

	.Resilt-text {
		margin: 10px 20px;
		color: #999999;
	}
</style>
